<template>
  <el-container class="muzi">
    <el-header>
      <div class="left-panel">
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.keyword" placeholder="请输入关键字" class="nm-search-name" @change="onSearch()" clearable/>
          <el-button type="primary" icon="el-icon-search" @click="onSearch()"/>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table :data="pager.dataList" border @selection-change="onSelection">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="name" label="姓名" align="center"/>
        <el-table-column prop="type" label="证件类型" align="center"/>
        <el-table-column prop="identity" label="证件号码" align="center"/>
        <el-table-column prop="sex" label="性别" align="center"/>
        <el-table-column prop="birthday" label="生日" :formatter="formatter" align="center"/>
        <el-table-column prop="mobile" label="联系电话" align="center"/>
        <el-table-column prop="email" label="邮箱" align="center"/>
        <el-table-column fixed="right" label="操作" min-width="75" align="center">
          <template #default="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="onEdit(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="operating" :gutter="5">
        <el-col :span="6" class="pager">
          <el-pagination layout="prev, pager, next" :total="pager.total" @current-change="onSearch"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import dayjs from "dayjs";

/**
 * 页面施工中
 * @author Yufe
 * @version 1.0
 */
export default {
  name: '个人信息',
  components: {},
  data() {
    return {
      ids: [],
      search: {
        keyword: ''
      },
      show: {
        exporting: false
      },
      pager: {
        total: 0,
        dataList: [],
        clean: function () {
          this.total = 0;
          this.dataList.length = 0;
        },
        fill: function ({total, dataList}) {
          this.total = total;
          this.dataList = dataList;
        }
      }
    }
  },
  mounted() {
    this.onSearch()
  },
  computed: {},
  methods: {
    onSearch(number = 1) {
      this.$API.employee.information.pager.get({ ...this.search, number }).then(res => {
        if (res.success) {
          this.pager.fill(res.data);
        }
      })
    },
    formatter(row, column, value) {
      if (value) return dayjs(value).format('YYYY-MM-DD')
      return "-";
    },
    onEdit(row) {
      console.info('编辑个人信息');
      const {serial} = row;
      this.$router.push({name: "information-form", params: {serial}})
    },
    onDelete(row) {
      this.$confirm(`确认要删除“${row.name}”吗?`, '警告提示', {type: 'warning',}).then(() => {
        this.$API.employee.information.detail.delete(row.serial).then(res => {
          if (res.success) {
            this.$message.success("删除成功")
            this.onSearch()
          }
        })
      }).catch((err) => {
        console.warn(err)
      })
    },
    onSelection(values) {
      this.ids = values.map(ele => ele.id);
    },
  }
}
</script>

<style lang="less" scoped>
  .muzi-form {

  }
</style>
